<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8" />
		<title>GVMaps 2.0 beta</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAApcDGzmRx_FhPyC57ge7mlhSbNreEXLUnd3NpE4zWTVxoy2uM8RSSVrk0cC2offNv2UASgDTxvjRBhA"></script>
		<script type="text/javascript" src="gvmaps.js"></script>
		<script type="text/javascript">
			$(function(){
				$('#map').gvmap().center('São Paulo - SP - Brasil').links('#subsidiary a', 'click')
			})
		</script>
		<style type="text/css">
		.map, .dynamic-map{
			float:left;
			height:300px;
			margin:10px;
			width:400px;
		}
		ul {
			float:left;
			list-style:none;
			margin:0;
		}
		ul li{
			margin:10px 0;
		}
		ul li a{
			border:1px solid #ccc;
			display:block;
			padding:5px 10px;
			text-indent:10px;
			width:200px;
		}
		</style>
	</head>
	<body>
		<!-- Default -->
		<div id="map" class="map" data-zoom="11"></div>
		<ul id="subsidiary">
			<li><a href="#sede" data-query="Av. Paulista, São Paulo - SP">Sede</a></li>
			<li><a href="#ibirapuera" data-query="Av. Ibirapuera, São Paulo - SP">Ibirapuera</a></li>
			<li><a href="#noveDeJulho" data-query="Av. 9 de Julho, São Paulo - SP">Nove de Julho</a></li>
		</ul>
	</body>
</html>